<template>
  <div style="width:100vw;height:100vh">
    <video
      v-if="showVideo"
      id="myVideo"
      preload="auto"
      style="width:100vw;height:100vh"
      autoplay="true"
    >
      <source :src="video_link" type="application/x-mpegURL" autoplay="true">
    </video>
  </div>
</template>
<script>
import { Button } from 'vant';
import Api from '@/vendor/api';
export default {
  data() {
    return {
      uid: null,
      api: null,
      liveInfo: null,
      wsUrl: null,
      showVideo: false,
      video_link: null
    };
  },
  components: {
    [Button.name]: Button
  },
  mounted() {
    this.api = new Api();
    this.init();
  },

  methods: {
    init() {
      this.uid = this.$route.params.uid;
      this.api.getLiveInfo(this.uid).then(info => {
        if (info.error_code === 0) {
          this.liveInfo = info.data.live_info;
          this.video_link = this.liveInfo.liveid;
          this.video_link = `http://wssource.hls.inke.cn/live/${this.video_link}/playlist.m3u8`;
          this.showVideo = true;
          //   document.getElementById("myVideo").play();
          //   this.FullScreen();
          this.api.getLiveChat(this.liveInfo.liveid).then(msg => {
            this.wsUrl = msg.url;
          });
        } else {
        }
      });
    },
    FullScreen() {
      var ele = document.documentElement;
      if (ele.requestFullscreen) {
        ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullScreen) {
        ele.webkitRequestFullScreen();
      }
    },
    exitFullscreen() {
      var de = document;
      if (de.exitFullscreen) {
        de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      }
    }
  }
};
</script>
<style  lang="less">
</style>
